<script setup>
import { statusMap,payStatusMap,orderTypeMap } from '@/utils/dict';


import { ref, onMounted, reactive } from 'vue';
//后端写好后去掉注释
// import { useRoute } from 'vue-router';
// // 导入接口（假设已封装）
// import { getWorkorderDetail } from '@/apis/workOrder';

// 路由参数
// const route = useRoute();
// 当前工单ID（从路由参数中获取）
// const workorderId = route.params.id;

// 详情数据
const detailData = reactive({
  id:'',
  title:'',
  des:'',
  name:'',
  phone:'',
  address:'',
  pay_status:'',
  status:'',
  pic:'',
  product_id:'',
  dispatcher_id:'',
  employee_id:'',
  type:'',
  create_time:'',
  update_time:''


});
// 加载状态
const loading = ref(true);
// 错误信息
const error = ref('');

// 获取详情数据
const fetchDetail = async () => {
  try {
    loading.value = true;
    // 调用接口，传递id
    // const response = await getWorkorderDetail(workorderId);
    // if (response.code === 200) {
    //   detailData.value = response.data;
    // } else {
    //   error.value = '获取数据失败';
    // }
    detailData.id=1352,
    detailData.title='冰箱维修',
    detailData.des='冰箱坏了',
    detailData.name='张三',
    detailData.phone='13345678912',
    detailData.address='四川',
    detailData.pay_status=2,
    detailData.status=3,
    detailData.pic='空白',
    detailData.product_id='789',
    detailData.dispatcher_id='4785',
    detailData.employee_id='75514',
    detailData.create_time='2025.3.6',
    detailData.update_time='2025.9.8'
  } catch  {
    console.error('请求失败：');
    error.value = '网络错误，请重试';
  } finally {
    loading.value = false; // 无论成功失败，都结束加载
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchDetail();
});
</script>
<template>
  <div class="detail-container">

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 错误提示 -->
    <div v-if="error" class="error">{{ error }}</div>

    <!-- 详情内容（数据加载成功后显示） -->
    <div v-else class="detail-content">
      <el-link href="\home" class="back-link">返回首页</el-link>
      <div class="detail-item">
        <span class="label">id：</span>
        <span class="value">{{ detailData.id }}</span>
      </div>
      <div class="detail-item">
        <span class="label">标题：</span>
        <span class="value">{{ detailData.title }}</span>
      </div>
      <div class="detail-item">
        <span class="label">描述：</span>
        <span class="value">{{ detailData.des }}</span>
      </div>
      <div class="detail-item">
        <span class="label">姓名：</span>
        <span class="value">{{ detailData.name }}</span>
      </div>
      <div class="detail-item">
        <span class="label">手机号：</span>
        <span class="value">{{ detailData.phone }}</span>
      </div>
      <div class="detail-item">
        <span class="label">地址：</span>
        <span class="value">{{ detailData.address }}</span>
      </div>
      <div class="detail-item">
        <span class="label">支付状态：</span>
        <span class="value">{{ payStatusMap[detailData.pay_status] ?? '未知' }}</span>
      </div>
      <div class="detail-item">
        <span class="label">状态：</span>
        <span class="value">{{ statusMap[detailData.status] ?? '未知' }}</span>
      </div>
      <div class="detail-item" style="width:100%;">
        <span class="label">地址：</span>
        <span class="value">{{ detailData.address }}</span>
      </div>
       <div class="detail-item">
        <span class="label">产品ID：</span>
        <span class="value">{{ detailData.product_id }}</span>
      </div>
       <div class="detail-item">
        <span class="label">派单人ID：</span>
        <span class="value">{{ detailData.dispatcher_id }}</span>
      </div>
       <div class="detail-item">
        <span class="label">接单员工ID：</span>
        <span class="value">{{ detailData.employee_id }}</span>
      </div>
       <div class="detail-item">
        <span class="label">类型：</span>
        <span class="value">{{ orderTypeMap[detailData.type] ?? '未知' }}</span>
      </div>
      <div class="detail-item">
        <span class="label">创建时间：</span>
        <span class="value">{{ detailData.create_time }}</span>
      </div>
      <div class="detail-item">
        <span class="label">更改时间：</span>
        <span class="value">{{ detailData.update_time }}</span>
      </div>
      <!-- 其他字段... -->
    </div>
  </div>
</template>
<style scoped>

.detail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 800px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow-y: auto;


}

/* 加载和错误状态区域，背景设为透明 */
.loading, .error {
  padding: 20px;
  text-align: center;
  background-color: transparent;
}

.error {
  color: #fff; /* 错误文字设为白色，与绿色背景对比 */
}

/* 详情内容区域，背景设为白色或其他与绿色协调的颜色 */
.detail-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 70%;
  height: 80%;
  margin-top: 15px;
  position: relative;
}

.detail-item {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #eee;
}
.back-link {
  position: absolute;
  top: 12px;   /* 离上边框距离，可微调 */
  right: 16px; /* 离右边框距离，可微调 */
  font-size: 14px;}

.label {
  display: inline-block;
  width: 120px;
  font-weight: 600;
  color: #555;
}
.top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.value {
  color: #333;
}
</style>

